<template>
    <div class="home">
        <div class="header">
            <Header></Header>
            <Nav></Nav>
        </div>
        <div class="home-main">
            <transition 
            :enter-class="enterClass"
            :enter-active-class="enterActiveClass"
            :leave-active-class="leaveActiveClass"
            >
                <keep-alive>
                    <component :is="homeComponentIndex"></component>
                </keep-alive>
                   
            </transition>
            <!--
            <transition 
            name="home-main-slide"
            v-on:enter="enter"
            v-on:leave="leave"
            >
                <keep-alive>
                    <component :is="homeComponentIndex"></component>
                </keep-alive>
            </transition>
           
            <div class="myslide-item" :class="{'myslide-active':navIndex===0}">
                <Recommend></Recommend>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===1}">
                <Phone></Phone>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===2}">
                <Intellect></Intellect>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===3}">
                <Tv></Tv>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===4}">
                <Lacktop></Lacktop>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===5}">
                <Homeel></Homeel>
            </div>
            <div class="myslide-item" :class="{'myslide-active':navIndex===6}">
                <Life></Life>
            </div>
            -->
        </div>
        <Backtop targetEl=".home-main"></Backtop>
        <Footer></Footer>
    </div>
</template>
<script>

import Header from '../components/Header'
import Nav from '../components/Nav'
import Footer from '../components/Footer'

import Recommend from './home/recommend/Index';
import Phone from './home/phone/Index';
import Intellect from './home/intellect/Index';
import Tv from './home/tv/Index';
import Lacktop from './home/lacktop/Index';
import Homeel from './home/homeel/Index';
import Life from './home/life/Index';


import {mapMutations, mapState} from 'vuex'

import Backtop from '@/components/Backtop'

import MyMovex from '@/utils/mymovex'

export default {
    name:'Home',
    components:{
        Header,
        Nav,
        Footer,
        Backtop,

        Recommend,
        Phone,
        Intellect,
        Tv,
        Lacktop,
        Homeel,
        Life
    },
    data:()=>{
        return {
            mySlide: null,
            myMovex:null,
        }
    },

    mounted(){
        this.switchFooterNav(1);
        this.myMovex = new MyMovex({moveCallback:this.movex});
        this.myMovex.startListening();
        
    },
    computed: {
        enterClass() {
            return this.slideDirection === 'left'?'slide-left-enter':'slide-right-enter'
        },
        enterActiveClass() {
            return this.slideDirection === 'left'?'slide-left-enter-active':'slide-right-enter-active'
        },
        leaveActiveClass() {
            return this.slideDirection === 'left'?'slide-left-leave-active':'slide-right-leave-active'
        },
        ...mapState(['navIndex','homeComponentIndex','slideDirection'])
    },
    methods: {
        movex(res) {
            if(res.deirection === 'right') {
                if(this.navIndex <= 0) return;
                if(res.status === 'success') {
                    this.switchNav(this.navIndex-1);
                } else if(res.status === 'reset') {
                    this.mySlide.moveRightReset(this.navIndex-1);
                } else if(res.status === 'transition') {
                    this.mySlide.moveRight(this.navIndex-1,res.movex);
                }
            } else if(res.deirection === 'left'){
                if(this.navIndex >= 6) return;
                if(res.status === 'success') {
                    this.switchNav(this.navIndex+1);
                } else if(res.status === 'reset') {
                    this.mySlide.moveLeftReset(this.navIndex+1);
                } else if(res.status === 'transition') {
                    this.mySlide.moveLeft(this.navIndex+1,res.movex);
                }
            }
        },
        ...mapMutations(['switchNav','switchNavContent','switchFooterNav'])
    },
    watch:{

    },
    destroyed() {
        this.myMovex.stopListening();
    }
}
</script>
<style lang="stylus">
@import '../assets/css/theme.styl'

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-enter-active {
  transition: all .5s;
}
.slide-left-leave-active {
  transform: translateX(-100%);
  transition: all .5s;
}


.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-enter-active {
  transition: all .5s;
}
.slide-right-leave-active {
  transform: translateX(100%);
  transition: all .5s;
}

.header
    position:fixed;
    background  $bgcolor;
    height 83.3px
    z-index 2;
    top:0;
    left:0;

/**home-main占满视口,下移一点 */
.home-main
    position absolute;
    top:83.3px;
    left 0;
    right:0;
    bottom:0;
    overflow-x:hidden;
    overflow-y:scroll;

/**home-item，每一页占满home-main */
.home-item
    position absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin-bottom 52px;
</style>